<template>
  <div class="searchBox">
    <el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline" label-width="auto">
      <!-- <el-row :gutter="24" class="demo-form-inline-row" >
        <el-col :span="24">
          <el-form-item style="width:100%">
            <el-select v-model="formInline.region" placeholder="发文日期" style="width:100%">
              <el-option label="一" value="shanghai"></el-option>
              <el-option label="二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="">
            <el-input v-model="formInline.startDate" placeholder="2022-1-1" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <span class="col-span">——</span>
        </el-col>
        <el-col :span="10">
          <el-form-item label="">
            <el-input v-model="formInline.endDate" placeholder="2022-1-19" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="24">
          <el-form-item>
            <el-select v-model="formInline.or" placeholder="并且" style="width:80px">
              <el-option label="或者" value="shanghai"></el-option>
              <el-option label="包含" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
      <!-- 高级搜索样式 -->
      <el-row :gutter="24" class="demo-form-inline-row" v-for="(item,index) in searchList" :key="index">
      <!-- 日期样式 -->
        <div class="demo-form-inline-row-div">
          <el-col :span="24">
            <el-form-item>
              <el-select v-model="item.region" placeholder="发文日期" style="width:100%">
                <el-option label="一" value="shanghai"></el-option>
                <el-option label="二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="">
              <el-input v-model="item.startDate" placeholder="" style="width:100%" @focus="clickInput('startDate',item.startDate,index)">
                
              </el-input>
              
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span class="col-span">——</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="">
              <el-input v-model="item.endDate" placeholder="" style="width:100%" @focus="clickInput('endDate',item.endDate,index)"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="index != searchList.length-1" :span="24">
            <el-form-item>
              <el-select v-model="formInline.or0" placeholder="并且" style="width:80px">
                <el-option label="或者" value="shanghai"></el-option>
                <el-option label="包含" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col v-show="index == searchList.length-1" :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCondition(searchList.length)">添加条件</el-button>
            <el-button type="success" size="mini" @click="submit">确认</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-col> -->
        </div>
        <!-- 默认样式 -->
        <div class="demo-form-inline-row-div">
          <el-col :span="24">
            <el-form-item>
              <el-select v-model="item.texts" placeholder="区域代码" style="width:100%">
                <el-option label="一" value="shanghai"></el-option>
                <el-option label="二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-select v-model="formInline.or1" placeholder="包含" style="width:80px">
                <el-option label="或者" value="shanghai"></el-option>
                <el-option label="啊啊" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
              <el-input v-model="item.text" placeholder="" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="index != searchList.length-1" :span="24">
            <el-form-item>
              <el-select v-model="formInline.or2" placeholder="并且" style="width:80px">
                <el-option label="或者" value="shanghai"></el-option>
                <el-option label="包含" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col v-show="index == searchList.length-1" :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCondition(searchList.length)">添加条件</el-button>
            <el-button type="success" size="mini" @click="submit">确认</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-col> -->
        </div>
        <!-- 政策类型样式 -->
        <div class="demo-form-inline-row-div">
          <el-col :span="24">
            <el-form-item>
              <el-select v-model="item.policy" placeholder="政策类型" style="width:100%">
                <el-option label="一" value="shanghai"></el-option>
                <el-option label="二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="">
              <el-radio-group v-model="radio">
                <el-radio-button label="财政"></el-radio-button>
                <el-radio-button label="债券"></el-radio-button>
                <el-radio-button label="区划"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-show="index != searchList.length-1" :span="24">
            <el-form-item>
              <el-select v-model="formInline.or3" placeholder="并且" style="width:80px">
                <el-option label="或者" value="shanghai"></el-option>
                <el-option label="包含" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col v-show="index == searchList.length-1" :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCondition(searchList.length)">添加条件</el-button>
            <el-button type="success" size="mini" @click="submit">确认</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-col> -->
        </div>
        <!-- 注册资金样式 -->
        <div class="demo-form-inline-row-div">
          <el-col :span="24">
            <el-form-item>
              <el-select v-model="item.register" placeholder="注册资金" style="width:100%">
                <el-option label="一" value="shanghai"></el-option>
                <el-option label="二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="">
              <el-input v-model="item.startNum" placeholder="" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span class="col-span">——</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="">
              <el-input v-model="item.endNum" placeholder="" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="index != searchList.length-1" :span="24">
            <el-form-item>
              <el-select v-model="formInline.or4" placeholder="并且" style="width:80px">
                <el-option label="或者" value="shanghai"></el-option>
                <el-option label="包含" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <el-col v-show="index == searchList.length-1" :span="24">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addCondition(searchList.length)">添加条件</el-button>
            <el-button type="success" size="mini" @click="submit">确认</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-col>
      </el-row>
      <!--  -->
    </el-form>
    <!-- 时间弹窗 -->
    <van-popup v-model="showPopup" position="bottom" style="height:30%">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="dateConfirm"
        @cancel="dateCancel"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name:"search",
  data(){
    return{
      formInline: {

      },
      searchList:[
        {id:0, region:"", startDate:"", endDate:"",text:"",startNum:"",endNum:"",register:"",policy:"",texts:""},
        // {id:0, region:"", startDate:"", endDate:"" }
      ],
      radio:[
        {
          radio1: '财政',
          radio2: '上海',
          radio3: '上海',
        }
      ],
      showPopup:false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      selectInput: "",
      selectSub: ""
    }
  },
  methods: {
    addCondition(id){
      this.searchList.push({id, region:"", startDate:"", endDate:"" })
    },
    submit(){
      console.log(this.formInline)
      console.log(this.searchList)
    },
    reset(){
      this.searchList.map(item => {
        for(let index in item){
          item[index] = ""
        }
        return item
      });

    },
    //点击input显示弹框
    clickInput(val,date,index){
      console.log(val,date)
      // 如果当前有date则按照选中得date回填，如果没有则回填当前日期
      if(date){
        this.currentDate = new Date(date)
      }else{
        this.currentDate = new Date()
      }
      this.selectInput = val
      this.selectSub = index
      this.showPopup = true
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '-' + month + '-' + day
    },
    // 日期选择框
    dateConfirm(val){
      let date = this.timeFormat(val)
      if(this.selectInput == "startDate"){
        this.searchList[this.selectSub].startDate = date
      }
      if(this.selectInput == "endDate"){
        this.searchList[this.selectSub].endDate = date
      }
      this.showPopup = false
    },
    dateCancel(){
      this.showPopup = false
    }
  },
}
</script>
<style   lang="scss" scoped>
.demo-form-inline-row .demo-form-inline-row-div{
  overflow: hidden;
  padding-top:10px;
  border-bottom: 1px solid #e5e5e5;
}
::v-deep .el-form-item__content,.el-form-item--mini{
  width:100%;
}
::v-deep .el-form-item--mini, .el-form-item, .el-form-item--small,.el-form-item{
  margin-bottom:8px;
}
.col-span{
  display: inline-block;
  line-height: 28px;
}
::v-deep .el-button--mini{
  margin-bottom: 5px;
}

</style>


